<template>
  <div class="banner">
    <p class="bannerTitle">
      <img
        src="@/assets/courseIndex/nschome-banner-title.png"
        alt=""
        class="title"
      />
    </p>
    <div class="cardsBox">
      <a href="" class="cardOne">
        <img src="@/assets/courseIndex/nschome-banner-cards_0.png" alt="" />
      </a>
      <a href="" class="cardOne">
        <img src="@/assets/courseIndex/nschome-banner-cards_1.png" alt="" />
      </a>
      <a href="" class="cardOne">
        <img src="@/assets/courseIndex/nschome-banner-cards_2.png" alt="" />
      </a>
    </div>
  </div>
</template>
<script>
export default {};
</script>
<style lang="scss" scoped>
.banner {
  height: 400px;
  background-image: url("https://assets-cdn.lanqb.com/school_v5/school/nschome-banner.png");
  background-size: 120% 120%;
  background-repeat: no-repeat;
  background-position: -135px 0;
}
.bannerTitle {
  width: 450px;
  height: 35px;
  margin: 0 auto;
  padding-top: 50px;
}
.title {
  width: 100%;
  height: 100%;
}
.cardsBox {
  width: 1180px;
  display: flex;
  margin: 0 auto;
  margin-top: 32px;
  justify-content: space-between;

  a {
    display: block;
    width: 370px;
    height: 233px;

    img {
      width: 100%;
      height: 100%;
      transition: all 0.4s;
      &:hover {
        // opacity: 0.5;
        transform:translateY(-8px);
      }
    }
  }
}
</style>